<!DOCTYPE html>

<html lang="en" xmlns:th="https://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<div th:replace="common/common::html"></div>

<head>
    <meta charset="UTF-8">
    <title th:text="#{login.register}">注册页面</title>
    <script th:inline="javascript">
        $(function() {

            $("#email-btn-id").click(function () {//发送验证码按钮

                emailCode = $("#email-code-id").val();
                regName = $("#regname-code-id").val();

                $.ajax({
                    type: 'post',
                    async: false,
                    dataType : 'json',
                    url: /*[[@{infoUserName}]]*/'',
                    data: [
                        {name:"regName",value:regName}
                    ],
                    success: function (data) {
                        if (data.success){
                            $.ajax({
                                type: 'post',
                                async: false,
                                dataType : 'json',
                                url: /*[[@{sendemailregcode}]]*/'',
                                data: [
                                    {name:"emailCode",value:emailCode}
                                ],
                                success: function (data) {
                                    if (data.success){
                                        message(data.msg);
                                    }else{
                                        message(data.msg);
                                    }
                                },
                                error: function (msg) {
                                    message(/*[[#{common.error}]]*/'');
                                }
                            });
                        }else{
                            message(data.msg);
                        }
                    },
                    error: function (msg) {
                        message(/*[[#{common.error}]]*/'');
                    }
                });


            })

            $("#infoname-btn-id").click(function () {//校验用户名按钮

                regName = $("#regname-code-id").val();

                $.ajax({
                    type: 'post',
                    async: false,
                    dataType : 'json',
                    url: /*[[@{infoUserName}]]*/'',
                    data: [
                        {name:"regName",value:regName}
                    ],
                    success: function (data) {

                            message(data.msg);

                    },
                    error: function (msg) {
                        message(/*[[#{common.error}]]*/'');
                    }
                });
            })

            $("#reg-btn-id").click(function () {//注册按钮

                emailCode = $("#email-code-id").val();
                regName = $("#regname-code-id").val();
                regniceName = $("#regnicename-code-id").val();
                emailverifyCode = $("#emailverify-code-id").val();
                password2 = $("#password2-code-id").val();
                password3 = $("#password3-code-id").val();
                if (password2 === password3){
                    $.ajax({
                        type: 'post',
                        async: false,
                        dataType : 'json',
                        url: /*[[@{authEmailCode}]]*/'',
                        data: [
                            {name:"emailverifyCode",value:emailverifyCode}
                        ],
                        success: function (data) {
                            if (data.success){
                                $.ajax({
                                    type: 'post',
                                    async: false,
                                    dataType : 'json',
                                    url: /*[[@{registerUser}]]*/'',
                                    data: [
                                        {name:"password2",value:password2},
                                        {name:"regName",value:regName},
                                        {name:"regniceName",value:regniceName},
                                        {name:"emailCode",value:emailCode}
                                    ],
                                    success: function (data) {
                                        if (data.success) {
                                            message(data.msg);
                                        }

                                    },
                                    error: function(msg){
                                        message(/*[[#{login.register.fail}]]*/'');
                                    }
                                });

                            }else{
                                message(data.msg);
                            }
                        },
                        error: function(msg){
                            message(/*[[#{common.error}]]*/'');
                        }
                    });
                }else{
                        message(/*[[#{login.register.password.error}]]*/'');

                }

            });
        });//ready
    </script>

    <style>
        html,body{
            height: 100%;
        }
        .form-control{
            display: inline-block;
            width: 90%;
        }
    </style>
</head>
<body style="display: flex;flex-direction:column;height: 100%;margin-left: 5px">
<div style="flex-basis: 82px">
    <img th:if="${session.lang} eq 'en'" th:src="@{/assets/images/logo_en.png}">
    <img th:if="${session.lang} eq 'zh'" th:src="@{/assets/images/logo_zh.png}">
    <div style=" position: absolute; top: 24px;right: 10px">
        <a class="btn" th:href="@{regPage(lang=zh)}" th:text="#{login.chinese}">中文</a>
        <a class="btn" th:href="@{regPage(lang=en)}" th:text="#{login.english}">英文</a>
    </div>
</div>

<div style="flex-grow: 1;display: flex;flex-direction: row;">
    <div style="flex-grow: 1;flex-basis: 200px;margin-left: 250px;margin-top: 60px">
        <img th:src="@{/assets/images/pic.png}"></img>
    </div>
    <div style="flex-basis: 500px;margin-right: 300px;margin-top: 30px">
<!--        返回页面按钮-->
        <div class="form-group" style="">
            <a id="return-btn-id" class="btn" href="login">
                <i class="glyphicon glyphicon-circle-arrow-left" th:text="#{login.return}" ></i>
            </a>
        </div>

        <form id="login-form-id" th:action="@{/login/verification}" method="post"
              style="margin: 20px;padding:20px;border: 1px solid #AAAAAA;">

            <div class="form-group">
                <i class="glyphicon glyphicon-user" ></i>
                <input id="regname-code-id" class="form-control" style="width: 80% " type="text" name="username"th:placeholder="#{login.user.name.placeholder}"
                       th:title="#{login.user.name.title}" pattern="^.{1,20}$">
                <a  id="infoname-btn-id" class="btn" th:title="#{login.register.infoname}">
                <i class="glyphicon glyphicon-tag"></i>
                </a>
            </div>
            <div class="form-group">
                <i class="glyphicon glyphicon-user" ></i>
                <input id="regnicename-code-id" class="form-control" style="width: 80% " type="text" name="username"th:placeholder="#{login.user.nicename.placeholder}"
                       th:title="#{login.user.nicename.title}" pattern="^.{1,20}$">

            </div>
            <div class="form-group">
                <i class="glyphicon glyphicon-envelope" ></i>
                <input id="email-code-id" class="form-control" type="text" name="email"th:placeholder="#{login.user.email.placeholder}"
                       th:title="#{login.user.email.title}" >
            </div>
            <div class="form-group " style="flex-direction:row " >
                <i class="glyphicon glyphicon-info-sign"></i>
                <input id="emailverify-code-id" style="width: 60% "  th:placeholder="#{login.user.email-code.placeholder}" th:title="#{login.verfy.code.btn}">
                <a id="email-btn-id"  class="btn " style="border:0.5px solid #A19F4F"  th:text="#{login.sendemailcode}" ></a>
            </div>


            <div class="form-group">
                <i class="glyphicon glyphicon-lock" ></i>
                <input id="password2-code-id" class="form-control" type="password" name="password" th:placeholder="#{login.password2.placeholder}"
                       th:title="#{login.password.title}" pattern="^.{1,10}$">
            </div>

            <div class="form-group">
                <i class="glyphicon glyphicon-lock" ></i>
                <input id="password3-code-id" class="form-control" type="password" name="password" th:placeholder="#{login.password3.placeholder}"
                       th:title="#{login.password.title}" pattern="^.{1,10}$">
            </div>
            <div class="form-group" >
                <a id="reg-btn-id" class="btn-success form-control" th:text="#{login.register}"
                   style="text-align: center;width: 97%;"></a>
            </div>


        </form>
    </div>
</div>
</body>
</html>